<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="'查看活动奖励'">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :label-width="150">
          <FormItem prop="pkActGroup" label="组别">
            <Select
              v-model="form.data.pkActGroup"
              remote
              :remote-method="getActGroup"
              :loading="actGroupLoading"
              disabled>
              <Option v-for="(option, index) in actGroupList" :value="'' + option.pk_act_group" :key="index">{{option.group_name}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="actRanking" label="顺序">
            <Select v-model="form.data.actRanking" style="width: 100%" placeholder="请选择顺序" disabled>
              <Option
                v-for="item in actSortCodeList"
                :key="item.code"
                :value="item.code">
                {{ item.name }}
              </Option>
            </Select>
          </FormItem>
          <FormItem prop="rankingName" label="名次(名称)">
            {{form.data.rankingName}}
          </FormItem>
          <FormItem prop="reardName" label="奖品">
            {{form.data.reardName}}
          </FormItem>
          <FormItem prop="reardNum" label="奖品数量">
            {{form.data.reardNum}}
          </FormItem>
          <FormItem prop="reardImage" label="奖品图片">
            <view-img v-if="form.visible" :defaultImageList="defaultImageList"></view-img>
          </FormItem>
          <FormItem prop="reardRule" label="奖励规则">
            {{form.data.reardRule}}
          </FormItem>
        </Form>
      </Col>
    </Row>

    <div slot="footer">
      <Button @click="closeModal()" type="primary">关闭</Button>
    </div>
  </Modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import uploadImg from '@/components/upload-img'
  import viewImg from '@/components/view-img'
  import activityApi from '@/api/activity'

  export default {
    name: 'update-modal',
    props: [
      'form'
    ],
    components: {
      viewImg,
      uploadImg
    },
    data () {
      return {
        loading: true,
        actGroupLoading: false,
        actGroupList: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        actSortCodeList: 'actSortCodeList'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      onClose (isVisible) {
        if (isVisible) {
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.reardImage || '')
          this.getActGroup()
        }
      },
      closeModal () {
        this.form.visible = false
      },
      async getActGroup () {
        this.actGroupLoading = true
        const { body } = await activityApi.group.list({
          pk_act_base_info: this.$route.params.activityId,
          currentPage: 1,
          limit: 10
        })
        const { responseData } = body
        this.actGroupList = responseData.content
        this.actGroupLoading = false
      }
    },
    async mounted () {
      this.$store.dispatch('getCode', 'act_sort')
      await this.getActGroup()
    }
  }
</script>
